<template>
  <div class="content">
    <RadioGroup v-model="reason" vertical>
      <Radio label="休息10分钟" border class="radio"></Radio>
      <Radio label="打电话去" border class="radio"></Radio>
      <Radio label="喝水去" border class="radio"></Radio>
      <Radio label="卫生间去" border class="radio"></Radio>
    </RadioGroup>
    <Input v-model="otherreason" :maxlength=maxlength  @on-change="change" show-word-limit type="textarea" placeholder="其他原因(不超过100个字符)" class="otherreason"/>
  </div>
</template>

<script>
    export default {
        name: "Otherwork",
        data(){
          return{
            reason:"",
            otherreason:"",
            maxlength:100,
          }
        },
        methods:{
          /*当前输入的内容*/
          change(value){
            console.log(value);
            console.log(this.otherreason);
            if (this.otherreason.length>0){
              this.reason = "";
            }
          }
        }
    }
</script>

<style scoped>

  .radio{
    width: 100%;
    font-size: 17px;
    margin-left: 15px;
    margin-top: 10px;
  }

  .content{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    width:100%;
    /*height:150px;*/
    margin-top: 20px;
    background:rgba(255,255,255,1);
    box-shadow:5px 7px 49px 5px rgba(44,137,234,0.13);
  }
  .otherreason{
    width: 90%;
    padding-top: 20px;
    margin-left: 15px;
    padding-bottom: 10px;
  }

</style>
